<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .box {
            width: 800px;
        }
    </style>
</head>

<body>
    <!-- 
        注册：后端要求：
        账号：name eg:"zs"
        密码：pass eg:"123"
        电话：tel eg:"110"
        性别：sex eg:0 说明：男-0 女-1
        爱好：hobby eg:[1,2,3] 说明：唱歌-1 跳舞-2 看书-3 写代码-4 
        职业；job eg:1 说明：web工程师-1 java工程师-2 php工程师-3 
        零食：lingShi eg:[1,2] 说明：辣条-1 薯片-2 大白兔糖-3 
        备注；des eg:"嘻嘻嘻"
        同意协议： isAgree eg:true 说明：同意-true 不同意-false
     -->
    <!-- 定义挂载点 -->
    <div id="app">
        <div class="box container">
            <h2>注册</h2>
            <div class="form-group">
                <label>账号</label>
                <input type="text" class="form-control" v-model="reg.name">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" class="form-control" v-model="reg.pass">
            </div>
            <div class="form-group">
                <label>电话</label>
                <input type="text" class="form-control" v-model="reg.tel">
            </div>
            <div class="form-group row">
                <label class="col-lg-1">性别</label>
                <!-- 对应radio,需要给input一个value，使用v-model去进行数据绑定 -->
                <div class="col-lg-11">
                    <label class="radio-inline"><input type="radio" name="sex" :value="0" v-model="reg.sex"> 男</label>
                    <label class="radio-inline"><input type="radio" name="sex" :value="1" v-model="reg.sex"> 女</label>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-1">爱好</label>
                <!-- 对应checkbox来说，初始值是数组，最后的结果就是数组，如果初始值不是数组，结果就是boolean -->
                <div class="col-lg-11">
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" :value="0" v-model="reg.hobby">唱歌</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" :value="1" v-model="reg.hobby">跳舞</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" :value="2" v-model="reg.hobby">看书</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" :value="3" v-model="reg.hobby">写代码</label>
                </div>
            </div>
    
            <div class="form-group row">
                <label class="col-lg-1">职业</label>
                <div class="col-lg-11">
                    <!-- 对于下拉菜单，给select绑定v_model,option的内容给用户看，value才是我们想要取到的值-->
                    <select class="form-control" v-model="reg.job">
                        <option value="">请选择</option>
                        <option :value="1">web工程师</option>
                        <option :value="2">java工程师</option>
                        <option :value="3">php工程师</option>
                    </select>
                </div>
            </div>
            {{reg}}
            <div class="form-group">
                <label>零食</label>
                <!-- 对应多选下拉，1.添加multiple属性,初始值给数组 -->
                <select class="form-control" multiple v-model="reg.lingShi">
                    <option value="">请选择</option>
                    <option :value="1">辣条</option>
                    <option :value="2">薯片</option>
                    <option :value="3">大白兔奶糖</option>
                </select>
            </div>

            <div class="form-group">
                <label>备注</label>
                <textarea class="form-control" rows="3" v-model="reg.des"></textarea>
            </div>
            <div class="form-group row">
                <label class="col-lg-1">同意协议</label>
                <input type="checkbox" v-model="reg.isAgree">
            </div>
            
            <button type="button" class="btn btn-primary" :disabled="!reg.isAgree" @click="register">注册</button>
        </div>
    </div>

    <script>
        new Vue({
            //挂载点
            el: "#app",
            //数据
            data: {
                reg:{
                    name:"",
                    pass:"",
                    tel:"",
                    sex:"",
                    hobby:[],
                    job:"",
                    lingShi:[],
                    des:"",
                    isAgree:""
                }
            },
            //方法
            methods: {
                register(){
                    if(!this.reg.name){
                        alert("请输入");
                        return;
                    }
                    console.log("提交数据");
                }
            }
        })
    </script>
</body>

</html>

